<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="{$Assets}layui/css/layui.css">
    <style type="text/css">
.layui-table-body{
    overflow: hidden;
}
.class1{width: 10px;display: inline-block;height: 10px;}
.class2{width: 40px;display: inline-block;height: 10px;}
.class3{width: 70px;display: inline-block;height: 10px;}
.class4{width: 100px;display: inline-block;height: 10px;}
.class5{width: 130px;display: inline-block;height: 10px;}

.class6{width: 160px;display: inline-block;height: 10px;}
.class7{width: 190px;display: inline-block;height: 10px;}
.class8{width: 220px;display: inline-block;height: 10px;}
.class9{width: 250px;display: inline-block;height: 10px;}
.class10{width: 280px;display: inline-block;height: 10px;}
    </style>
</head>
<body>
{include file="public/header" /}
<div class="layui-btn-group demoTable" style="margin-left: 15px;">
    <button class="layui-btn" data-type="addcolumn">添加栏目</button>
    <button class="layui-btn layui-btn-danger" data-type="delproducts">删除选中</button>
    <button class="layui-btn" data-type="reload" id="div" style="display: none;"></button>
</div>


<div style="width: 98%;margin:0 auto;">
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 
</div>

<script type="text/html" id="motion">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="class">
      <span class="class{{d.level}}"></span>
     {{# if(d.level!=1){  }}
          └
    {{# }  }}
   {{d.classname}}
</script>
<div id="addcolumn" style="display: none;">
  <div style="padding: 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;height: 415px;">
    <fieldset class="layui-elem-field" style="padding:20px 20px 160px;margin-bottom: 30px">
            <legend>添加栏目</legend>

    <form class="layui-form" action="" style="margin-left: -55px;">
        <div class="layui-form-item">
          <label class="layui-form-label">所属栏目</label>
          <div class="layui-input-inline" style="color: #000;width: 279px;">
            <select name="pid" lay-verify="required">
              <option value="0">一级栏目</option>
              {volist name="column" id="vo" }
                  <option value="{$vo.id}"><?php echo str_repeat("&#8195;", $vo['level']);?>{if condition="$vo.level !=1"}└{/if}{$vo.classname}</option>
              {/volist}
            </select>
          </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">栏目名称</label>
            <div class="layui-input-block">
              <input type="text" name="classname" lay-verify="required"  autocomplete="off" placeholder="请输入栏目名称" class="layui-input">
            </div>
        </div>




        <div class="layui-inline">
          <label class="layui-form-label">栏目类型</label>
          <div class="layui-input-inline" style="color: #000;">
            <select name="type" lay-verify="required">
              <option value=""></option>
              <option value="product" selected="">产品栏目</option>
              <option value="about">单页面</option>
            </select>
          </div>
        </div>

      <div class="layui-form-item" style="margin-top: 10px;">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="add">添加</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
      
    </form>
    </fieldset>
    </div>
</div>


<script src="{$Assets}layui/layui.js?t=1515376178709"></script>
<script>
layui.use(['form', 'layedit', 'laydate','table'], function(){
  var table = layui.table,
      form = layui.form,
      layer = layui.layer,
      layedit = layui.layedit,
      laydate = layui.laydate;
  
  //
  table.render({
    elem: '#LAY_table_user'
    ,url: 'allcolumn'
    ,cols: [[
      {checkbox: true, fixed: true}
      ,{type:'numbers', title: '序号', width:60,fixed: true}
      ,{title: '栏目',toolbar: '#class'}
      ,{width:178, align:'center', toolbar: '#motion'}

    ]]
    ,id: 'prolist'
    ,limit:20
    ,page: true
 
  });
  //
  table.on('checkbox(prolist)', function(obj){
    console.log(obj)
  });



        //
  form.on('submit(add)', function(data){
    
    var adddata=JSON.stringify(data.field);


                    $.ajax({
                        type:"POST",
                        url: "addcolumn",
                        data:{data:adddata},
                        dataType:"json",

                        success:function(datas){
                            if(datas==1){
                                layer.msg('添加成功！');
                                layer.closeAll();
                                var oDiv = document.getElementById('div'); 
                                oDiv.click();
                            }else{
                              layer.msg('添加异常！');
                            }
                            



                        }
                    });

    return false;
  });


  //
  table.on('tool(user)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID+ data.id + ' );
    } else if(obj.event === 'del'){
      layer.confirm(''+data.classname+'', function(index){
       


                $.ajax({
                    type:"POST",
                    url: "delcolumn",
                    data:{data:data.id},
                    dataType:"json",
                    success:function(datas){
                        //layer.close(index);
                        //alert(datas);
                        if(datas==1){
                          layer.msg('删除成功');
                          table.reload('prolist', {
                            page: {
                              curr: 1 // 1 
                            }
                          });
                        }else{
                          layer.msg('删除异常');
                        }
                        
                        
                    }
                });

        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){


      var that = this; 
      //
      layer.open({
        type: 2 //iframe
        ,title: '修改栏目'
        ,area: ['700px', '650px']
        ,shade: 0.8
        ,maxmin: true
        ,offset: 'auto'
        ,content: 'editcolumn/id/'+data.id
        ,zIndex: layer.zIndex //1
        ,success: function(layero){
          layer.setTop(layero); //2
        }
      });



    }
  });

  var $ = layui.$, active = {
    reload: function(){
   
      
      //
      table.reload('prolist', {
        page: {
          curr: 1 // 1 
        }
      });
    },







    delproducts: function(){ //
      var checkStatus = table.checkStatus('prolist')
      ,data = checkStatus.data;


                var deldatas=JSON.stringify(data);

          if(data.length!=0){
                $.ajax({
                    type:"POST",
                    url: "delcolumns",
                    data:{data:deldatas},
                    dataType:"json",
                    success:function(datas){
                        //layer.close(index);
                        //alert(datas);
                        layer.msg('删除成功');
                        table.reload('prolist', {
                          page: {
                            curr: 1 // 1 
                          }
                        });
                        
                    }
                });
            }else{
                layer.msg('请选择');
            }





    },
    addcolumn:function(){


    layer.open({
        type: 1
        ,title: false //
        ,closeBtn: 2
        ,area: '450px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro' //id
        ,btnAlign: 'c'
        ,moveType: 1 //
        ,content: $('#addcolumn')
        
      });





    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>

{include file="public/footer"/}
</body>
</html>